<template>
    <div>
       <headNav></headNav>
       <div class="head"></div>
       <div class="content">  
            <div class="act_intro">
                <img class="intro_img" src="./../static/images/intro_img.png" alt="">
                <p class="intro_p">{{intro}}</p>
            </div>
            <div class="jctj">
              <p class="jctj_p">精彩推荐</p>
              <el-carousel class="video_swiper" indicator-position="none">
                <el-carousel-item v-for="item in banners" :key="item.cover_url">
                  <video :poster="item.cover_url" controls class="tj_video" :src="item.file_url"></video>
                </el-carousel-item>
              </el-carousel>
            
            </div>
            <div class="list">
                <div class="btn_div">
                    <div class="video_btn" :class="isClick1 ? 'sway' : ' ' " @click="sptj"></div>
                    <div class="img_btn" :class="isClick2 ? 'sway' : ' ' "  @click="tptj"></div>
                </div>
                <div class="water_div">
                    <vue-waterfall-easy @click="handleWater" :loadingDotCount="0" :reachBottomDistance="30" :gap="10" :width="1400" :imgWidth="340" :imgsArr="imgsArr" @scrollReachBottom="getData">
                    <div class="info" slot-scope="props">
                    <p class="infop p1">{{props.value.title}}</p>
                    <p class="infop p2">{{props.value.school}}</p>
                    </div>
                    </vue-waterfall-easy>
                </div>
            </div>
            <div class="lm_sch">
                 <div style="width:1400px">
                    <img style="  margin: 100px 0 60px 0;" class="tit" src="./../static/images/tit5.png" alt="">
                    <div class="lm_sch_pos">
                          <div class="lm_sch_con">
                            <div :class="index==sch_ind ? 'sch_item_active' : '' " v-on:mouseover="handleMouseOver1(index)" v-on:mouseout="handleMouseOut1(index)" class="sch_item" v-for="(item,index) in sch" :key="index">{{item}}</div>
                          </div>
                          <el-collapse-transition name="el-zoom-in-top" v-show="show">
                              <div class="school" v-show="show">
                                    <div class="school_list"  >
                                      <div class="school_list_item" v-for="(item,index) in schoolList" :key="index">{{item.name}}</div>
                                    </div>
                                
                              </div>
                          </el-collapse-transition>
                    </div>
                 </div>
            </div>
        </div>
     <footCom></footCom>
       
    </div>
  </template>
  
  <script>
import vueWaterfallEasy from 'vue-waterfall-easy';

import footCom from '@/common/foot.vue';
import headNav from '@/common/headNav.vue';

export default {
    name: 'articleIndex',
    components:{
     headNav,
     footCom,
     vueWaterfallEasy,
  },
  
    data(){
      return{
          imgsArr:[
          ],
          page:1,
          show:false,
          sch:['上城区','拱墅区','西湖区','滨江区','萧山区','余杭区','临平区','钱塘区','富阳区','临安区','桐庐县','淳安县','建德市','直属学校'],
          ind:0,
          sch_ind:-1,
          area:[],
          type:1,
          schoolList:[],
          intro:'',
          isClick1:false,
          isClick2:false,
          banners:[],
      }
    },
  created(){
     this.getSchool();
     this.getData()
     this.getDetail()
     
  },
    methods:{
            // 视频推荐
            sptj(){
              this.isClick2=false;
              if(this.type==0){
                this.isClick1 = true
                this.imgsArr = []
                this.page = 0
                this.type = 1;
                this.getData()
              }
            },   
            tptj(){
              this.isClick1=false;
              if(this.type==1){
                this.isClick2 = true
                this.imgsArr = []
                this.page = 0
                this.type = 0;
                this.getData()
              }
            },  
            // 活动详情文字内容
            getDetail(){
              // 获取活动详情文字内容
              this.$axios.get('https://eduvideo.hangzhou.com.cn/api/v1/get_activity_detail/1').then(res=>{
                  this.intro = res.data.data.intro
                  this.banners = res.data.data.banners
              })
            },
            getSchool(){
                    this.$axios.get('https://eduvideo.hangzhou.com.cn/api/v1/get_areas').then(res=>{
                        this.area = res.data.data
                    })
            },
            getSchoolList(){
                this.area.forEach(item=>{
                if(item.name==this.schoolName){
                    this.schoolList =  item.sons
                }
                })
            },
            handleMouseOver1(index){
                    this.sch_ind = index;
                    this.schoolName = this.sch[index]
                    this.show = true;
                    this.getSchoolList()
            },
            handleMouseOut1(){
                    this.sch_ind = -1
                    this.show = false;
                    this.schoolList = []
            },
            // 获取推荐的作品
            getData() {
                this.$axios.get('https://eduvideo.hangzhou.com.cn/api/v1/get_activity_works?activity_id=1'+'&page=' + this.page  + '&type=' + this.type)
                    .then(res => {
                    var arr = []
                    res.data.data.data.forEach(item=>{
                        var obj = {}
                        obj['title' ]= item.title
                        obj['school'] = item.school
                        obj['id'] = item.id
                        obj.src =item.poster
                        arr.push(obj)
                        })
                        this.imgsArr = this.imgsArr.concat(arr)
                        this.page++
                    })
            }, 
            handleWater(item,val){
            // window.open(item.href, '_blank');
            this.$router.push({
                path:'/workDetail',
                query:{
                    id:val.value.id
                }
            })
            },

    }
  }
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>

.sway {
  animation: swayAnimal 800ms ease-in-out;
}
 
@keyframes swayAnimal {
 
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
 
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
 
  30%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
 
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
 
  50% {
    transform: translate3d(-4px, 0, 0);
  }
}
  .video_swiper{
    width: 100%;
    height: 675px;
  }
  .video_swiper>>>.el-carousel__container{
    height: 675px !important;
  }
  .lm_sch{
    width: 100%;
    height: 440px;
    background-color: #c6a979;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .video_btn{
    width: 204px;
    height: 72px;
    background:url('./../static/images/75videobtn.png') no-repeat;
    background-size: 100% 100%;
    margin-right: 30px;
    cursor: pointer;
  }
  .img_btn{
    width: 204px;
    height: 72px;
    background:url('./../static/images/75imgbtn.png') no-repeat;
    background-size: 100% 100%;
    margin-left: 30px;
    cursor: pointer;
  }
  .btn_div{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 90px;
    margin-bottom: 60px;
  }
  .tj_video{
    width: 100%;
    height: 670px;
    object-fit: cover;
    margin-top: 30px;
  }
  .jctj_p{
    margin: 0;
    padding: 0;
    font-size: 30px;
    color: #cd430d;
  }
  .jctj{
    width: 1200px;
    height: 740px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 90px;
  }
  .intro_p{
    margin: 0;
    padding: 0;
    color: #cd430d;
    font-size: 18px;
    width: 1085px;
    margin-left: 40px;
    margin-top: 10px;
    text-indent: 2em;
    line-height: 30px;
  }
  .intro_img{
    margin-top: 55px;
    margin-left: 35px;
  }
  .act_intro{
    width: 1200px;
    height: auto;
    background: url('./../static/images/75intro.png') no-repeat;
    background-size: 100% 100%;
    margin-top: 40px;
    padding-bottom: 30px;
  }
  .topNav{
    width: 100%;
    height: 65px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .nav_con{
    width: 1400px;
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
  }
  .nav_con a{
    text-decoration: none;
    font-size: 18px;
    color: #616ed6;
    cursor: pointer;
    letter-spacing: 5px;
  }
  .shu{
    color: #616ed6;
    margin: 0 35px;
  }
  .head{
    width: 100%;
    height: 469px;
    background: url('./../static/images/75banner.jpg') no-repeat center top;
  }
  .content{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: #fff4de;
  }
  .list{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 100px;
  }
  .list_item_active{
  
    color: #a6ebff !important;
    border: 1px solid #fff;
    border-radius: 20px;
  }
  .list_item:hover{
   
    color: #a6ebff;
    border: 1px solid #fff;
    border-radius: 20px;
    cursor: pointer;
  }
  .list_item{
    width: 100px;
    height: 45px;
    text-align: center;
    line-height: 45px;
    color: transparent;
    background-clip: text;
    background-image: linear-gradient(to right, #fff, #ddf4fc, #a6ebff);
  }
  .list_nav{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0 60px 0;
  }
  .list_img{
    width: 1400px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .img_item{
    width: 340px;
    box-sizing: border-box;
    margin-left: 13px;
  
  }
  .list_img .img_item:nth-child(4n+1){
    margin-left: 0 !important;
  }
  
  .img_item img{
    width: 340px;
    height: auto;
  }
  .list_tit_div{
    width: 333px;
    height: 97px;
    background: url('./../static/images/list_tit_bg.png') no-repeat;
    background-size: 100% 100%;
    text-align: center;
    line-height: 97px;
    color: #fff;
    font-size: 36px;
    font-weight: bolder;
  }
  .infop{
    margin: 0;
    padding: 0;
  }
  .info{
    margin-bottom: 50px;
    background-color: transparent;
    border: none !important;
    box-shadow: none !important;
  }
  .p1{
    margin: 25px 0 20px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    width: calc(100% - 7px);
    line-height: 25px;
    padding-left: 7px;
    font-size: 20px;
    color: #333333;
  }
  .p2{
    padding-left: 7px;
    color: #646464;
    font-size: 18px;
  }
  .water_div{
    width: 1400px;
    height: 1800px;
  
  }
  .water_div>>>.vue-waterfall-easy-container .vue-waterfall-easy a.img-inner-box{
    box-shadow: none !important;
    border-radius:none !important;
    cursor: pointer !important;
  }
  .water_div{
    width: 1400px;
    height: 1000px;
  
  }
  .water_div>>>.vue-waterfall-easy-container::-webkit-scrollbar ,.water_div>>>.vue-waterfall-easy-scroll::-webkit-scrollbar {
    width: 0 !important;
    background-color: #f9f9f9;
  }
  .lm_sch_con{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 60px;
    border: 1px solid #fff;
    border-radius: 30px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: #c6a979;
    
  }
  .lm_sch_pos{
    width: 100%;
    position: relative;
  
  }
  .sch_item{
    width: 100px;
    height: 45px;
    text-align: center;
    line-height: 45px;
    color: transparent;
    background-clip: text;
    background-image: linear-gradient(to right, #fff, #ddf4fc, #a6ebff);
    cursor: pointer;
    font-size: 20px;
  }
  .sch_item_active{
    color: #a6ebff !important;
  }
  .school{
    width: 100%;
    height: auto;
    background-color: #fff;
    position: absolute;
    top: 30px;
    left: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    box-sizing: content-box;
  }
  .school_list{
    margin: 45px 0 20px 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: start;
    width: 80%;
    flex-wrap: wrap;
  }
  .school_list_item{
    margin: 10px;
    font-size: 20px;
    color:#000;
  }
  </style>
  